<template>
    <div class="weather-panel" v-loading="loading">
        <el-card shadow="hover">
            <template v-if="!failed">
                <div class="live-location">
                    <div>
                        <h1 class="city">{{ weather.city }}</h1>
                        <span style="font-size: 12px;">{{ weather.province }}</span>
                    </div>
                    <span style="font-size: 12px;">更新时间:{{ weather.reportTime }}</span>
                </div>
                <div class="live-weather">
                    <span class="temperature"> {{ weather.temperature }}°</span>
                    <span class="temperature"> {{ weather.weather }}</span>
                </div>
                <div class="live-abstract">
                    今天比较冷
                </div>
                <div class="live-other">
                    <div class="live-wind">
                        <span>{{ weather.windPower }}级</span>
                        <p>{{ weather.windDirection }}风</p>
                    </div>
                    <div class="live-humidity">
                        <span>{{ weather.humidity }}%</span>
                        <p>相对湿度</p>
                    </div>

                </div>
            </template>
            <template v-else>
                <el-result icon="error" title="" sub-title="实况天气获取失败">

                </el-result>
            </template>

        </el-card>
    </div>
</template>
<script>
export default {
    title: '天气实况',
    icon: 'Sunny',
    description: '天气情况',
};
</script>
<script setup>
import { liveWeather } from "@/api/system/weather"
const { proxy } = getCurrentInstance();
const weather = ref({});
const loading = ref(true);
const failed = ref(false);
const getLiveWeather = () => {
    loading.value = true;
    liveWeather().then((res) => {
        failed.value = false;
        weather.value = res;
    }).catch((error) => {
        failed.value = true;
        proxy.$modal.msgError("实况天气获取失败");
    }).finally(() => {
        loading.value = false;
    });
}

onMounted(getLiveWeather);
</script>

<style lang="scss" scoped>
.weather-panel {
    width: 100%;
    // max-width: 460px;

    p,
    span {
        padding: 0;
        margin: 0;
    }

    .live-location {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;

        .city {
            margin: 0;
            display: inline-block;
            padding-right: 20px;
        }
    }

    .live-weather {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .live-abstract {
        display: flex;
        justify-content: center;
        padding: 20px;
    }

    .live-other {
        display: flex;
        background-color: var(--el-color-info-light-5);
        justify-content: space-between;
        padding: 10px;
        // border: 1px solid var(--el-color-info-light-5);
        border-radius: 5px;
    }
}
</style>